<template>
	<div class="cell-percentage">
		<div class="cell-percentage-left" :class="{ 'cell-percentage--required': required }">
			<span class="cell-percentage-label" :class="{ 'cell-percentage-label--disabled': isView }">{{ label }}</span>
		</div>
		<div class="cell-percentage-right">
			<van-progress :percentage="value" show-pivot />
		</div>
	</div>
</template>

<script>
export default {
	name: 'FormItemProgress',
	props: {
		label: { type: String, default: '' },
		value: { type: [Number, String], default: 0 },
		required: { type: Boolean, default: false },
		isView: { type: Boolean, default: false },
	},
}
</script>

<style scoped>
.cell-percentage {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ebedf0;
	padding: 10px 10px 10px 16px;
	font-size: 14px;
	background-color: #fff;
}
.cell-percentage-left {
	width: 70px;
	flex-shrink: 0;
}
.cell-percentage-label {
	color: #646566;
}
.cell-percentage--required:before {
	position: absolute;
	content: '*';
	left: -8px;
	font-size: 14px;
	color: #ee0a24;
}
.cell-percentage-right {
	width: 100%;
	margin: 8px 0 0 10px;
}
</style>
